<template>
  <div class="wrap Hearder">
    <h1><img src="../img/indexLogo.6f8ac4f0.png" alt=""></h1>
    <ul class="navs">
      <!-- 首页 全部商品 个人中心 我的订单 -->
      <li :class="{active:$route.path=='/home'}" @click="$router.push('/home')">首页</li>
      <li :class="{active:$route.path=='/goods'}" @click="$router.push('/goods')">全部商品</li>
      <li :class="{active:$route.path=='/user'}" @click="$router.push('/user')">个人中心</li>
      <li :class="{active:$route.path=='/order'}" @click="$router.push('/order')">我的订单</li>
      <li :class="{active:$route.path=='/free'}" @click="$router.push('/free')">专属福利</li>
    </ul>
    <div class="search" >
      <input type="text" name="" id="" placeholder="请输入关键词" v-model="keyword">
      <span class="searchImg"><img src="../img/search.png" alt=""  @click="search(keyword)"></span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      keyword:''
    }
  },
  methods:{
    search(keyword){
      console.log(1);
      this.$router.push(`/goods?keyword=${keyword}`)
    }
  }
}
</script>

<style lang='less' scoped>
  .Hearder{
      height:118px ;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .navs{
        display: flex;
        justify-content: space-between;
        width: 500px;
        li{
          cursor: pointer;
        }
        .active{
          color: skyblue;
        }
      }
      .search{
        display: flex;
        input{
          width: 214px;
          height: 40px;
          border: 1px solid #DEDEDE;
          border-radius: 20px 0px 0px 20px;
          outline: none;
          box-sizing: border-box;
          text-indent: 1em;
        }
        .searchImg{
          width: 50px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: #0A328E;
          border-radius: 0px 20px 20px 0px;
          cursor: pointer ;
        }
      }
  }
</style>